<template>
  <div>
    <h1>【aty-dropdown】 component demo</h1>
    <p>【aty-dropdown】 本质</p>
    <aty-row class="fd-dropdown-box">
      <aty-row>
        <aty-title level="4">1.【aty-dropdown】  基础</aty-title>
        <aty-row>
          <aty-col>
            <aty-dropdown triggerCategory="button" :data="data" />
          </aty-col>
          <aty-col offset="1">
            <aty-dropdown triggerCategory="link" :data="data" />
          </aty-col>
          <aty-col offset="1">
            <aty-dropdown triggerCategory="text" :data="data" />
          </aty-col>
          <aty-col offset="1">
            <aty-dropdown :hasIcon="false" :data="data" />
          </aty-col>
        </aty-row>
      </aty-row>

      <aty-row>
        <aty-title level="4">2.【aty-dropdown】  触发方式</aty-title>
        <aty-row>
          <aty-col>
            <aty-dropdown trigger="click" :data="data" />
          </aty-col>
          <aty-col offset="1">
            <aty-dropdown trigger="hover" :data="data" />
          </aty-col>
        </aty-row>
      </aty-row>

      <aty-row>
        <aty-title level="4">3.【aty-dropdown】  对齐方向</aty-title>
        <aty-row>
          <aty-col>
            <aty-dropdown :data="data2" placement="bottom-start" text=" 下拉菜单(居左)" />
          </aty-col>
          <aty-col offset="1">
            <aty-dropdown :data="data2" placement="bottom" text="下拉菜单(居中)" />
          </aty-col>
          <aty-col offset="1">
            <aty-dropdown :data="data2" placement="bottom-end" text=" 下拉菜单(居右)" />
          </aty-col>
        </aty-row>
      </aty-row>

      <aty-row>
        <aty-title level="4">4.【aty-dropdown】  禁用，选中，分割使用</aty-title>
        <aty-dropdown trigger="click" @click="click" :data="data3" text="禁用|选中|分割实例" />
      </aty-row>

      <aty-row>
        <aty-title level="4">5.【aty-dropdown】  组合方式</aty-title>
        <aty-dropdown trigger="click" @click="click" :data="data11" text="组合方式">
          <aty-dropdown-menu class="fd-drop-list" :data="data12">
            <aty-dropdown-item v-for="(item,index) in data13" :key="item.code+'data13'" :data="item" />
            <aty-dropdown-item>
              <aty-row>
                <aty-col span="12" v-text="'code:'+test.code" />
                <aty-col span="12" v-text="'name:'+test.name" />
              </aty-row>
            </aty-dropdown-item>
          </aty-dropdown-menu>
        </aty-dropdown>
      </aty-row>

      <aty-row>
        <aty-title level="4">6.【aty-dropdown】  自定义下拉条目内容</aty-title>
        <aty-dropdown trigger="click" text="自定义下拉条目内容">
          <aty-dropdown-menu class="fd-drop-list">
            <aty-dropdown-item v-for="(item,index) in data4" :key="item.code" :data="item">
              <aty-row>
                <aty-col span="12" v-text="'code:'+item.code" />
                <aty-col span="12" v-text="'name:'+item.name" />
              </aty-row>
            </aty-dropdown-item>

          </aty-dropdown-menu>
        </aty-dropdown>
      </aty-row>

      <aty-row>
        <aty-title level="4">7.【aty-dropdown】  自定义下拉内容</aty-title>
        <aty-panel>自定义下拉内容，此两个参数必不可少，</aty-panel>
        <aty-panel> :visible="visible",</aty-panel>
        <aty-panel> @visible-change="visibleChange"， 通过控制 visible的值来显示隐藏。</aty-panel>
        <aty-dropdown :visible="visible" @visible-change="visibleChange" text="自定义下拉内容">
          <aty-dropdown-panel class="fd-drop-content">
            <aty-title level="5">用户可以自己放任意的东西</aty-title>
            <aty-row>
              <aty-input label="用户名" prop="user" :labelWidth="80" :labelPosition="'right'" />
              <aty-input label="密码" prop="pw" :labelWidth="80" :labelPosition="'right'" />
            </aty-row>
            <aty-row>
              <aty-button type="primary" @click="confirm">确定</aty-button>
              <aty-button type="default" @click="cancel">取消</aty-button>
            </aty-row>
          </aty-dropdown-panel>
        </aty-dropdown>
      </aty-row>

    </aty-row>

  </div>
</template>
<script>
export default {
  data () {
    return {
      test: {
        code: 'adasd',
        name: 'asdasdasdasasaaa'
      },
      visible: false,
      data: (function (len) {
        var _data = []
        for (var i = 0; i < len; i++) {
          _data.push({
            code: i + 1,
            name: '中国人' + (i + 1)
          })
        }
        return _data
      })(2),
      data2: (function (len) {
        var _data = []
        for (var i = 0; i < len; i++) {
          _data.push({
            code: i + 1,
            name: '中国人炎黄子孙' + (i + 1)
          })
        }
        return _data
      })(5),

      data3: (function (len) {
        var _data = []
        for (var i = 0; i < len; i++) {
          _data.push({
            code: i + 1,
            disabled: i == 0, // 是否禁用
            selected: i == 1, // 是否选中
            divided: i == 4, // 是否有分割线
            name: '中国人' + (i + 1)
          })
        }
        return _data
      })(5),
      data4: (function (len) {
        var _data = []
        for (var i = 0; i < len; i++) {
          _data.push({
            code: i + 1,
            name: '中国人' + (i + 1)
          })
        }
        return _data
      })(5),

      data11: (function (len) {
        var _data = []
        for (var i = 0; i < len; i++) {
          _data.push({
            code: i + 1,
            name: '中国人drop-down中的' + (i + 1)
          })
        }
        return _data
      })(2),
      data12: (function (len) {
        var _data = []
        for (var i = 0; i < len; i++) {
          _data.push({
            code: i + 1,
            name: '中国人drop-menu中的' + (i + 1)
          })
        }
        return _data
      })(2),
      data13: (function (len) {
        var _data = []
        for (var i = 0; i < len; i++) {
          _data.push({
            code: i + 1,
            name: '中国人drop-item中的' + (i + 1)
          })
        }
        return _data
      })(2)
    }
  },
  methods: {
    click (data, _index) {
      console.log(data)
      console.log(_index)
      this.data3.forEach((value, index) => {
        this.data3[index].selected = false
        if (index == _index) {
          this.data3[index].selected = true
        }
      })
    },
    visibleChange (value) {
      this.visible = value
    },
    confirm () {
      this.visible = false
    },
    cancel () {
      this.visible = false
    }
  }

}
</script>
<style  lang="less" type="text/less"  >
    .fd-dropdown-box {
        margin: 20px;
        text-align: left;
    }
    .fd-drop-list {
        width: 200px;
    }
    .fd-drop-content {
        width: 300px;
        padding: 20px 20px 20px 0;
        text-align: center;
        .aty-btn{
             margin: 0 5px;
         }
    }
</style>
